<template>
  <div
    class="menu-logo-box aic jcc"
    :style="{
      background: isFull
        ? 'var(--navColorBg)'
        :themeCurrentMenuItem.ColorBg,
    }"
  >
    <img src="../../assets/svg/login-box-bg.svg" alt="" />
    <div
      class=""
      v-show="!isCollapse"
      :style="{
        color: isFull
          ? 'var(--navColorFont)'
          : navTitleColorFont,
      }"
    >
      {{ projectName }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, getCurrentInstance, computed } from "vue";
import { useIndexStore } from "/@ts/store";
const store = useIndexStore();
const projectName = computed(() => store.getProjectName);
const isFull = computed(() => store.getIsFull);
const navTitleColorFont = computed(() => store.getNavTitleColorFont);
const themeCurrentMenuItem = computed(() => store.getThemeCurrentMenuItem);
const activeIndex = ref(0);
const state = reactive({
  data: { a: 1 },
});
const handleSelect = () => {};
defineProps({
  isCollapse: {
    type: Boolean,
    required: true,
  },
});
</script>

<style scoped lang="scss">
.menu-logo-box {
  // position: absolute;
  background-color: #001529;
  height: 54px;
  overflow: hidden;

  img {
    width: 45px;
  }
  div {
    font-size: 22px;
    color: #fff;
    font-weight: bold;
    white-space: nowrap;
    margin-left: 15px;
    margin-right: 15px;
  }
}
</style>
